<template>
	<view class="detail">
		<view class="title">
			<h2>{{title}}</h2>
		</view>
		<view class="author">
			<text>{{createBy}}</text>
		</view>
		<view class="time">
			<text>{{createTime.substring(0,16)}}</text>
		</view>
		<view class="image" v-if="image">
			<image :src="image? image : '/static/noimage.png' "
					@click="clickImg(image)"
					mode="aspectFill"/>
		</view>
		<view class="content">
			<text>{{content}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				title: '',
				image: '',
				content: '',
				createTime: '',
				createBy: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getNoticeDetail(this.id)
		},
		methods: {
			getNoticeDetail(id) {
				let params = id
				this.$u.api.notice.noticeDetail(params).then((res) => {
					if (res.code === 0) {
						this.id = res.data.id
						this.title = res.data.title
						this.image = res.data.image
						this.content = (res.data.content || '').replaceAll('\\n', '\n')
						this.createTime = res.data.createTime
						this.createBy = res.data.createBy
					}
				}).catch(err => {
					if(err.data.msg === '请先登录'){
						uni.navigateTo({
							url: '/pages/sys/login/index'
						})
					}
					if(err.data.msg === '请先认证'){
						uni.showToast({
							title: '尚未通过认证',
							icon: 'error',
							duration: 2000
						});
					}
				});
			},
			clickImg(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			}
		}
	}
</script>

<style>
	.detail {
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.author {
		margin-top: 20rpx;
		font-family: 'Times New Roman', Times, serif;
		font-size: 0.8em;
		color: rgb(75, 142, 196)
	}

	.time {
		margin-top: 20rpx;
		font-family: 'Times New Roman', Times, serif;
		font-size: 0.8em;
		color: rgb(169, 167, 168)
	}

	image {
		width: 100%;
		margin-top: 40rpx;
	}

	.content {
		margin-top: 50rpx;
	}

	p {
		font-family: 'Times New Roman', Times, serif;
		font-size: 0.9em;
		text-indent: 2em;
		line-height: 2em;
	}
</style>
